<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/ranking.css">
    <title>2021少数民族传统体育竞技</title>
</head>

<body>
    <div id="app">
        <div class="layout">
            <img src="http://qrwbtqqjh.hn-bkt.clouddn.com/rangking_bg.png" alt="" class="bg-img">
            <div class="list-box">
                <img src="./img/title_img.png" alt="" class="title-img">
                <div class="item-box" @scroll="moreItem">
                    <div class="item" v-for="(item,index) in list" :key="item.user_id">
                        <img src="./img/pic_icon2.png" alt="" class="pic_icon" v-show="index == 0">
                        <img src="./img/pic_icon3.png" alt="" class="pic_icon" v-show="index == 1">
                        <img src="./img/pic_icon1.png" alt="" class="pic_icon" v-show="index == 2">
                        <span v-show="index > 2" class="ranking-text">{{index}}</span>
                        <img :src="item.headimg_url" alt="">
                        <span>{{item.nick_name}}</span>
                        <span>{{item.total_score}}</span>
                    </div>
                </div>
            </div>
            <img src="./img/back_index_btn.png" alt="" class="back">
        </div>

    </div>

    <script src="./js/jquery.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/vue.js"></script>
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        request('get_share_sign/', {
            zm_token: localStorage.user_token,
            _zm_post_type: 'ajax',
            url: location.href
        }).then(res => {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.rsm.appId, // 必填，公众号的唯一标识
                timestamp: res.rsm.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.rsm.nonceStr, // 必填，生成签名的随机串
                signature: res.rsm.signature, // 必填，签名
                jsApiList: ['onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone',
                    'onMenuShareTimeline',
                    'updateAppMessageShareData',
                    'hideOptionMenu',
                    'showOptionMenu',
                    'hideMenuItems',
                    'showMenuItems',
                    'hideAllNonBaseMenuItem',
                    'showAllNonBaseMenuItem',
                ] // 必填，需要使用的JS接口列表
            });
            wx.ready(function () { //需在用户可能点击分享按钮前就先调用
                wx.hideAllNonBaseMenuItem();
            });
        })
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    list: [],
                    page: 1,
                    noData: true
                }
            },
            mounted() {
                this.getData()
            },
            methods: {
                moreItem() {
                    if (this.noData) {
                        let itemBox = document.querySelector('.item-box')
                        let item = document.getElementsByClassName('item')[0]
                        let itemHeight = (item.clientHeight + 7) * this.list.length
                        // console.log(itemBox.scrollTop + itemBox.clientHeight);
                        // console.log(itemHeight);
                        if (itemBox.scrollTop + itemBox.clientHeight >= itemHeight) {
                            this.page++
                            this.getData()
                        }
                    } else {
                        return
                    }
                },
                getData() {
                    request('ranking_list_per_page/', {
                        zm_token: localStorage.user_token,
                        _zm_post_type: 'ajax',
                        page: this.page
                    }).then(res => {
                        // console.log(res.rsm);
                        if (res.rsm.user_list.length > 0) {
                            this.list = this.list.concat(res.rsm.user_list)
                            this.noData = true
                        } else {
                            this.noData = false
                        }
                    })
                }
            },
        })
        $('.back').on('click', function () {
            location.href = 'http://youxi.haiqikj.com/index.html'
        })
        // $('.item-box').scroll(function () {
        //     console.log(Math.round($('.item-box').scrollTop() + $('.item-box').height()));
        //     console.log($(".item").length * ($(".item").height() + 7 ));
        //     if (Math.round($('.item-box').scrollTop() + $('.item-box').height()) >= $(".item").length * ($(
        //             ".item").height() + 7)) {
        //         console.log('到底了');
        //         request('ranking_list_per_page/', {
        //             zm_token: localStorage.user_token,
        //             _zm_post_type: 'ajax',
        //             page: 1
        //         }).then(res => {
        //             console.log(res.rsm);
        //             this.list = res.rsm.user_list
        //         })
        //     }
        // })
    </script>
</body>

</html>